<template>
  <div class="pagecontent" id="detailInfo">
    <div class="contentDetail" v-if="!updateFlag">
      <el-row>
        <el-col :span="24" class="headerCon">
          <el-row>
            <el-col :span="12">
              <div class="headerBG">
                <img :src="getHeaderImg" alt />
              </div>
            </el-col>
            <el-col align="right" :span="12">
              <el-button size="small" type="primary" @click="updateInfoFun">修改</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-form
        :model="basicInfoForm"
        status-icon
        ref="basicInfoForm"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-row :gutter="150">
          <el-col :span="24">
            <h2 class="titleH">基本信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学号" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.sn"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.gender.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学院" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.colleges.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年级" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.grade"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.majors.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="班级" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.classes.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.nationName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="籍贯" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.nativePlaceName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="politicalStatus.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户口类型" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.nodeType.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件类型" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.idType.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.idNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生状态" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.status.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学制" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.studentLength"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生源地" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.sourcePlace"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账户" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.bankCard"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生在校职务" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.position"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校区" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.campus.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宿舍" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.dorm"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.email"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="qq" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.qq"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="checkPass">
              <el-date-picker
                size="small"
                disabled
                style="width:100%"
                v-model="basicInfoForm.birthDate"
                type="date"
                placeholder="选择出生日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="个人健康状况" prop="healthStatus">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.healthStatus"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="titleH">入学信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学时间" prop="checkPass">
              <el-date-picker
                size="small"
                style="width:100%"
                disabled
                v-model="basicInfoForm.enterDate"
                type="date"
                placeholder="选择入学时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学前户口所在地" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.registeredResidence"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学前就读中学" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchool"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.postalCode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书家庭地址" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeHomeAddress"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书收件人姓名" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeAddresseeName "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书收件人电话" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeAddresseePhone "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高考考生号" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.examNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高考成绩" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchoolScore"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排位" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.rank"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考生科类名称" prop="checkPass">
              <el-select
                disabled
                style="width:100%"
                placeholder
                v-model="basicInfoForm.objectType"
                size="small"
              >
                <el-option label="理科" :value="1"></el-option>
                <el-option label="文科" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="sub-title">高考志愿</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿1" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerOne "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿2" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerTwo "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿3" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerThree "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿4" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerFour "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿5" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerFive "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿6" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerSix "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投档志愿" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.deliveryVolunteer "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服从" prop="checkPass">
              <el-select
                disabled
                style="width:100%"
                placeholder
                v-model="basicInfoForm.obey"
                size="small"
              >
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="sub-title">体检信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身高" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchoolScore"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体重" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.weight"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="右视力" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.rightVision"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="左视力" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.leftVision"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体检结论" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.physicalExamConclusion"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="转氨酶" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.transaminase"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表抗原" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.surfaceAntigen"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="色觉检查" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.colourSense"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收缩压" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.systolicPressure"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="舒张压" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.diastolicPressure "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <h2 class="titleH">紧急联系人</h2>
          </el-col>
          <el-col :span="24">
            <el-table :data="basicInfoForm.emergencyContactList">
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column label="姓名" prop="name"></el-table-column>
              <el-table-column label="关系" prop="relation"></el-table-column>
              <el-table-column label="电话" prop="phone"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 学校修改信息 -->
    <div class="contentDetail" id="schoolUpdate" v-if="userType!==1&&updateFlag">
      <update-student-info :studentBasicInfo="basicInfoForm" @cancleUpdate="cancleUpdate"></update-student-info>
    </div>
    <!-- 学生修改信息 -->
    <div class="contentDetail" id="studentUpdate" v-if="userType===1&&updateFlag">
      <xd-studentUpdateInfo :studentBasicInfo="basicInfoForm" @cancleUpdate="cancleUpdate"></xd-studentUpdateInfo>
    </div>
  </div>
</template>
<script>
import defaultHeader from '@/assets/images/default.png'
import manHeader from '@/assets/images/touxiang.png'
import womanHeader from '@/assets/images/womentouxiang.png'
import { school, student, common } from '@api/index'
import studentUpdateInfo from '@/pages/main/routes/student/updateSelfInfo'
import updateStudentInfo from '@/pages/main/routes/school/updateStudentInfo'
// import { role } from "../../../../api"

export default {
  name: 'detailInfo',
  data () {
    return {
      updateFlag: false,
      // 1：学生；3：学校用户,4：年级辅导员,5 ：学院用户：
      userType: this.$store.state.user.type,
      headerIMg: '',
      politicsStatusOptions: [],
      // 学生状态
      studentStatusOptions: [],
      sn: this.$route.query.sn || this.$store.state.user.id,
      basicInfoForm: {
        sn: '',
        emergencyContactList: [],
        majors: { name: null, id: null },
        colleges: { name: null, id: null },
        classes: { name: null, id: null },
        politicalStatus: { name: null, id: null },
        idType: { name: null, id: null },
        campus: { name: null, id: null },
        status: { name: null, id: null },
        gender: { name: null, id: null },
        nodeType: { name: null, id: null }
      }
    }
  },
  props: ['activeIndex'],
  watch: {
    //  看activeIndex是否是切换到个人信息，不是则改变updateFlag
    activeIndex (currentval, oldval) {
      if (currentval !== 'xd-detailInfo') {
        this.updateFlag = false
      }
    }
  },
  computed: {
    getHeaderImg () {
      if (this.headerIMg) {
        return `/fastdfs-util/api/fastdfs/download/image?filePath=${this.basicInfoForm.picUrl}`
      } else if (
        this.basicInfoForm.gender.name === '未知' ||
                this.basicInfoForm.gender.id === -1
      ) {
        return defaultHeader
      } else if (
        this.basicInfoForm.gender.name === '男' ||
                this.basicInfoForm.gender.id === 1
      ) {
        return manHeader
      } else if (
        this.basicInfoForm.gender.name === '女' ||
                this.basicInfoForm.gender.name === 0
      ) {
        return womanHeader
      }
    },
    politicalStatus () {
      return this.basicInfoForm.politicalStatus
    }
  },
  components: {
    'xd-studentUpdateInfo': studentUpdateInfo,
    'update-student-info': updateStudentInfo
  },
  async mounted () {
    await this.politicsStatusSelect()
    await this.getStudentStatus()
    this.initPage()
  },
  methods: {
    // 政治面貌
    async politicsStatusSelect () {
      await common()
        ._getAllPoliticsStatus()
        .then(res => {
          this.politicsStatusOptions = []
          if (res.status) {
            res.data.forEach(item => {
              let params = {
                id: item.id,
                name: item.name
              }
              this.politicsStatusOptions.push(params)
            })
          }
        })
    },
    // 学生状态
    async getStudentStatus () {
      this.studentStatusOptions = []
      await common()
        ._getStudentStatus()
        .then(res => {
          this.studentStatusOptions = []
          if (res.status && res.data) {
            this.studentStatusOptions.push(...res.data)
          }
        })
    },
    initPage () {
      // 1：学生；3：学校用户,4：年级辅导员,5 ：学院用户：
      const userType = this.userType === 10 ? 2 : this.userType
      if (parseInt(userType) === 1) {
        this.studentGetStudentInfo()
      } else {
        this.schoolGetStudentInfo()
      }
    },
    cancleUpdate () {
      this.updateFlag = false
      this.initPage()
    },
    // -----------------------------非学生用户查询学生信息---------------------------------------
    schoolGetStudentInfo () {
      const _this = this
      school()
        ._findStudentInfoBySn(this.sn)
        .then(res => {
          if (res.status) {
            this.headerIMg = res.data.picUrl
            this.basicInfoForm = res.data
            this.basicInfoForm = Object.assign(
              _this.basicInfoForm,
              {
                gender: school()._genderType(res.data.gender)
              },
              {
                birthDate: res.data.birthDate
                  ? _this
                    .$moment(res.data.birthDate)
                    .format('YYYY-MM-DD')
                  : null
              },
              {
                enterDate: res.data.enterDate
                  ? _this
                    .$moment(res.data.enterDate)
                    .format('YYYY-MM-DD')
                  : null
              },
              {
                politicalStatus: this.politicsStatusOptions.find(
                  item => item.id === res.data.politicalStatus
                ) || { id: null, name: null }
              },
              {
                idType: school()._cardType(res.data.idType)
              },
              {
                colleges: res.data.colleges[0]
                  ? res.data.colleges[0]
                  : { id: null, name: null }
              },
              {
                majors: res.data.majors[0]
                  ? res.data.majors[0]
                  : { id: null, name: null }
              },
              {
                classes: res.data.classes[0]
                  ? res.data.classes[0]
                  : { id: null, name: null }
              },
              {
                campus: {
                  id: res.data.campusId,
                  name: res.data.campusName
                }
              },
              {
                status: this.studentStatusOptions.find(
                  item => item.id === res.data.status
                ) || { id: null, name: null }
              },
              {
                nodeType: common()._getNodeType(
                  res.data.nodeType
                )
              }
            )
          }
        })
    },
    studentGetStudentInfo () {
      const _this = this
      student()
        ._findPersonalInfoBySn(this.sn)
        .then(res => {
          if (res.status) {
            this.headerIMg = res.data.picUrl
            this.basicInfoForm = res.data
            this.basicInfoForm = Object.assign(
              _this.basicInfoForm,
              {
                gender: common()._genderType(res.data.gender)
              },
              {
                birthDate: res.data.birthDate
                  ? _this
                    .$moment(res.data.birthDate)
                    .format('YYYY-MM-DD')
                  : null
              },
              {
                enterDate: res.data.enterDate
                  ? _this
                    .$moment(res.data.enterDate)
                    .format('YYYY-MM-DD')
                  : null
              },
              {
                politicalStatus: this.politicsStatusOptions.find(
                  item => item.id === res.data.politicalStatus
                ) || { id: null, name: null }
              },
              {
                idType: school()._cardType(res.data.idType)
              },
              {
                colleges: res.data.colleges[0]
                  ? res.data.colleges[0]
                  : { id: null, name: null }
              },
              {
                majors: res.data.majors[0]
                  ? res.data.majors[0]
                  : { id: null, name: null }
              },
              {
                classes: res.data.classes[0]
                  ? res.data.classes[0]
                  : { id: null, name: null }
              },
              {
                campus: {
                  id: res.data.campusId,
                  name: res.data.campusName
                }
              },
              {
                status: this.studentStatusOptions.find(
                  item => item.id === res.data.status
                ) || { id: null, name: null }
              },
              {
                nodeType: common()._getNodeType(
                  res.data.nodeType
                )
              }
            )
          }
        })
    },
    // 切换修改
    updateInfoFun () {
      this.updateFlag = true
    }
  }
}
</script>
<style lang="less">
#detailInfo .el-form--label-top .el-form-item__label{
  padding:0;
}
</style>
<style lang="less" scoped>
.sub-title{
  font-size: 15px;
  margin-top: 8px;
}
.headerCon {
  position: relative;
  height: 150px;
  .headerBG {
    width: 120px;
    height: 150px;
    text-align: center;
  }
  img {
    width: 100px;
  }
  .el-button {
  }
}
.titleH{
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
